<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>销售预测分析 - NEWBE工作室订单管理系统</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    :root {
      --primary-color: #3a36db;
      --secondary-color: #00c9ff;
      --accent-color: #00ffb3;
      --dark-bg: #0a0b1a;
      --card-bg: #13142a;
      --text-color: #e0e0ff;
      --border-color: #2a2a57;
      --hover-color: #2d2d69;
      --gradient-primary: linear-gradient(135deg, #3a36db, #00c9ff);
      --gradient-secondary: linear-gradient(135deg, #00c9ff, #00ffb3);
      --box-shadow: 0 8px 32px rgba(0, 201, 255, 0.1);
      
      --bg-dark: #090b1f;
      --bg-card: #13142a;
      --bg-card-hover: #1a1c35;
      --text-primary: #e0e0ff;
      --text-secondary: #b8b8cc;
      --text-tertiary: #7171a6;
      --blue-primary: #3a36db;
      --blue-secondary: #00c9ff;
      --blue-tertiary: #007bff;
      --green-accent: #00ffb3;
      --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3);
      --border-radius: 8px;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      background-color: var(--bg-dark);
      color: var(--text-primary);
      min-height: 100vh;
    }
    
    /* 导航栏样式 */
    .navbar {
      background-color: var(--card-bg);
      padding: 0.8rem 2rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      position: sticky;
      top: 0;
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-color);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      background: var(--gradient-primary);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      box-shadow: 0 4px 15px rgba(58, 54, 219, 0.3);
    }

    .logo-text {
      font-size: 1.2rem;
      font-weight: 600;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .nav-items {
      display: flex;
      gap: 2.5rem;
    }

    .nav-item {
      list-style: none;
      position: relative;
    }

    .nav-link {
      color: var(--text-color);
      text-decoration: none;
      font-size: 1rem;
      font-weight: 500;
      padding: 0.5rem 0;
      transition: all 0.3s ease;
    }

    .nav-link.active {
      color: var(--secondary-color);
      font-weight: 600;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--gradient-secondary);
      border-radius: 3px;
    }

    .nav-link:hover {
      color: var(--secondary-color);
    }

    .user-profile {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--gradient-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dark-bg);
      font-weight: bold;
    }
    
    .container {
      max-width: 1600px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    /* 页面标题栏 */
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }
    
    .page-title {
      font-size: 28px;
      font-weight: 600;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .page-subtitle {
      color: var(--text-secondary);
      font-size: 16px;
      margin-top: 8px;
    }
    
    .header-buttons {
      display: flex;
      gap: 15px;
    }
    
    .btn {
      background: var(--gradient-primary);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: var(--border-radius);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      transition: all 0.3s;
    }
    
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(58, 54, 219, 0.3);
    }
    
    /* 统计卡片区域 */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
    
    .stat-card {
      background-color: var(--bg-card);
      border-radius: var(--border-radius);
      padding: 20px;
      box-shadow: var(--shadow-card);
      position: relative;
      overflow: hidden;
      transition: all 0.3s;
    }
    
    .stat-card:hover {
      background-color: var(--bg-card-hover);
      transform: translateY(-5px);
    }
    
    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--gradient-primary);
    }
    
    .stat-title {
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 10px;
    }
    
    .stat-value {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 5px;
    }

    .value-positive {
      color: var(--green-accent);
    }

    .value-neutral {
      color: var(--text-primary);
    }

    .value-negative {
      color: #ff5a5a;
    }
    
    .stat-comparison {
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--text-tertiary);
      font-size: 14px;
    }
    
    .stat-icon {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 18px;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    
    /* 图表区域 */
    .charts-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
    
    .chart-container {
      background-color: var(--bg-card);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-card);
      padding: 20px;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .chart-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .chart-controls {
      display: flex;
      gap: 10px;
    }
    
    .chart-control-btn {
      background-color: transparent;
      border: 1px solid var(--text-tertiary);
      color: var(--text-secondary);
      border-radius: var(--border-radius);
      padding: 5px 10px;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .chart-control-btn.active {
      background: var(--gradient-primary);
      border-color: transparent;
      color: white;
    }
    
    .chart-area {
      flex: 1;
      min-height: 300px;
    }
    
    /* 数据表格区域 */
    .table-section {
      background-color: var(--bg-card);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-card);
      padding: 1.5rem;
      margin-bottom: 2rem;
    }
    
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .table-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .search-box {
      position: relative;
      width: 250px;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 10px 10px 35px;
      border-radius: var(--border-radius);
      border: 1px solid var(--text-tertiary);
      background-color: rgba(255, 255, 255, 0.05);
      color: var(--text-primary);
    }
    
    .search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-tertiary);
    }
    
    .data-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }
    
    .data-table th,
    .data-table td {
      padding: 15px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .data-table th {
      color: var(--text-secondary);
      font-weight: 500;
    }
    
    .data-table tbody tr {
      transition: background-color 0.3s;
    }
    
    .data-table tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.03);
    }
    
    .tag {
      display: inline-block;
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .tag-success {
      background-color: rgba(0, 255, 179, 0.2);
      color: var(--green-accent);
    }
    
    .tag-info {
      background-color: rgba(0, 201, 255, 0.2);
      color: var(--blue-secondary);
    }
    
    .tag-warning {
      background-color: rgba(255, 193, 0, 0.2);
      color: #ffc100;
    }
    
    .tag-danger {
      background-color: rgba(255, 90, 90, 0.2);
      color: #ff5a5a;
    }
    
    .pagination {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
    }
    
    .page-btn {
      background-color: var(--bg-card-hover);
      color: var(--text-secondary);
      border: none;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .page-btn.active {
      background: var(--gradient-primary);
      color: white;
    }
    
    .page-btn:hover:not(.active) {
      background-color: rgba(255, 255, 255, 0.1);
    }

    /* 置信区间样式 */
    .confidence-interval {
      fill-opacity: 0.2;
      stroke-opacity: 0;
    }

    /* 信息卡片 */
    .info-card {
      background-color: var(--bg-card);
      border-radius: var(--border-radius);
      border-left: 4px solid var(--blue-secondary);
      padding: 15px;
      margin-bottom: 20px;
    }

    .info-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--blue-secondary);
    }

    .info-content {
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* 方法选择器 */
    .method-selector {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
    }

    .method-option {
      background-color: var(--bg-card);
      border: 1px solid var(--text-tertiary);
      border-radius: var(--border-radius);
      padding: 10px 15px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.3s;
    }

    .method-option.active {
      background: var(--gradient-primary);
      border-color: transparent;
      color: white;
      box-shadow: 0 4px 12px rgba(58, 54, 219, 0.3);
    }
  </style>
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="logo">
      <div class="logo-icon">
        <i class="fas fa-chart-pie"></i>
      </div>
      <div class="logo-text">NEWBE工作室</div>
    </div>
    
    <ul class="nav-items">
      <li class="nav-item">
        <a href="test.html" class="nav-link">RFM客户行为分析</a>
      </li>
      <li class="nav-item">
        <a href="test2.html" class="nav-link">客户生命周期</a>
      </li>
      <li class="nav-item">
        <a href="test1.html" class="nav-link">营销活动分析</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link active">销售预测</a>
      </li>
    </ul>
    
    <div class="user-profile">
      <div class="user-avatar">A</div>
    </div>
  </nav>

  <div class="container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div>
        <h1 class="page-title">销售预测分析</h1>
        <p class="page-subtitle">基于历史销售数据的智能预测分析与决策辅助系统</p>
      </div>
      <div class="header-buttons">
        <button class="btn">
          <i class="fas fa-file-export"></i>导出报告
        </button>
        <button class="btn">
          <i class="fas fa-sync-alt"></i>刷新数据
        </button>
      </div>
    </div>
    
    <!-- 信息卡片 -->
    <div class="info-card">
      <h3 class="info-title"><i class="fas fa-info-circle"></i> 关于销售预测</h3>
      <p class="info-content">本系统基于历史销售数据，结合多种预测算法（移动平均法、指数平滑法、线性趋势预测），预测未来30天的销售情况。置信区间表示预测值的可能波动范围，环比增长率反映预测销售额相比上月的变化趋势。</p>
    </div>
    
    <!-- 方法选择器 -->
    <div class="method-selector">
      <div class="method-option active">移动平均法</div>
      <div class="method-option">指数平滑法</div>
      <div class="method-option">线性趋势预测</div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-chart-line"></i></div>
        <div class="stat-title">预测销售额（下月）</div>
        <div class="stat-value value-positive">¥185,600</div>
        <div class="stat-comparison">
          <i class="fas fa-arrow-up"></i>
          <span>12.5% 环比增长</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-percentage"></i></div>
        <div class="stat-title">预测置信区间</div>
        <div class="stat-value value-neutral">±8.2%</div>
        <div class="stat-comparison">
          <span>范围: ¥170,480 - ¥200,720</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-coins"></i></div>
        <div class="stat-title">上月销售总额</div>
        <div class="stat-value">¥165,000</div>
        <div class="stat-comparison">
          <i class="fas fa-arrow-up"></i>
          <span>8.3% 较前月</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-calendar-check"></i></div>
        <div class="stat-title">预测准确率</div>
        <div class="stat-value value-positive">91.4%</div>
        <div class="stat-comparison">
          <i class="fas fa-arrow-up"></i>
          <span>2.1% 较上次预测</span>
        </div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-row">
      <div class="chart-container">
        <div class="chart-header">
          <div class="chart-title">销售额预测趋势</div>
          <div class="chart-controls">
            <button class="chart-control-btn active">月度</button>
            <button class="chart-control-btn">季度</button>
            <button class="chart-control-btn">年度</button>
          </div>
        </div>
        <div id="salesForecastChart" class="chart-area"></div>
      </div>
      
      <div class="chart-container">
        <div class="chart-header">
          <div class="chart-title">销售季节性分析</div>
          <div class="chart-controls">
            <button class="chart-control-btn active">全部</button>
            <button class="chart-control-btn">主营产品</button>
            <button class="chart-control-btn">主机租赁</button>
          </div>
        </div>
        <div id="seasonalityChart" class="chart-area"></div>
      </div>
    </div>
    
    <div class="charts-row">
      <div class="chart-container">
        <div class="chart-header">
          <div class="chart-title">产品销售预测对比</div>
          <div class="chart-controls">
            <button class="chart-control-btn active">按金额</button>
            <button class="chart-control-btn">按数量</button>
          </div>
        </div>
        <div id="productComparisonChart" class="chart-area"></div>
      </div>
      
      <div class="chart-container">
        <div class="chart-header">
          <div class="chart-title">预测误差分析</div>
          <div class="chart-controls">
            <button class="chart-control-btn active">误差分布</button>
            <button class="chart-control-btn">历史对比</button>
          </div>
        </div>
        <div id="errorAnalysisChart" class="chart-area"></div>
      </div>
    </div>
    
    <!-- 历史销售数据表格 -->
    <div class="table-section">
      <div class="table-header">
        <h3 class="table-title">历史销售数据</h3>
        <div class="search-box">
          <i class="fas fa-search search-icon"></i>
          <input type="text" class="search-input" placeholder="搜索月份或产品">
        </div>
      </div>
      
      <table class="data-table">
        <thead>
          <tr>
            <th>月份</th>
            <th>销售额</th>
            <th>主营产品销售额</th>
            <th>主机租赁收入</th>
            <th>环比增长率</th>
            <th>同比增长率</th>
            <th>订单数量</th>
            <th>预测偏差</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2023年12月</td>
            <td>¥165,000.00</td>
            <td>¥130,500.00</td>
            <td>¥34,500.00</td>
            <td><span class="tag tag-success">+8.3%</span></td>
            <td><span class="tag tag-success">+15.2%</span></td>
            <td>36</td>
            <td><span class="tag tag-info">+2.1%</span></td>
          </tr>
          <tr>
            <td>2023年11月</td>
            <td>¥152,300.00</td>
            <td>¥120,800.00</td>
            <td>¥31,500.00</td>
            <td><span class="tag tag-success">+5.2%</span></td>
            <td><span class="tag tag-success">+12.8%</span></td>
            <td>32</td>
            <td><span class="tag tag-info">-1.8%</span></td>
          </tr>
          <tr>
            <td>2023年10月</td>
            <td>¥144,800.00</td>
            <td>¥112,500.00</td>
            <td>¥32,300.00</td>
            <td><span class="tag tag-warning">-2.3%</span></td>
            <td><span class="tag tag-success">+9.5%</span></td>
            <td>30</td>
            <td><span class="tag tag-warning">-4.5%</span></td>
          </tr>
          <tr>
            <td>2023年9月</td>
            <td>¥148,200.00</td>
            <td>¥115,600.00</td>
            <td>¥32,600.00</td>
            <td><span class="tag tag-success">+3.8%</span></td>
            <td><span class="tag tag-success">+11.2%</span></td>
            <td>31</td>
            <td><span class="tag tag-info">+1.2%</span></td>
          </tr>
          <tr>
            <td>2023年8月</td>
            <td>¥142,800.00</td>
            <td>¥110,900.00</td>
            <td>¥31,900.00</td>
            <td><span class="tag tag-danger">-6.5%</span></td>
            <td><span class="tag tag-warning">+2.3%</span></td>
            <td>28</td>
            <td><span class="tag tag-danger">-7.8%</span></td>
          </tr>
        </tbody>
      </table>
      
      <div class="pagination">
        <button class="page-btn"><i class="fas fa-angle-left"></i></button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <button class="page-btn">...</button>
        <button class="page-btn">12</button>
        <button class="page-btn"><i class="fas fa-angle-right"></i></button>
      </div>
    </div>
  </div>

  <script>
    // 初始化图表
    document.addEventListener('DOMContentLoaded', function() {
      // 销售预测趋势图
      const salesForecastChart = echarts.init(document.getElementById('salesForecastChart'));
      
      const salesForecastOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['实际销售额', '预测销售额', '置信区间'],
          textStyle: {
            color: '#e0e0ff'
          },
          top: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['8月', '9月', '10月', '11月', '12月', '1月(预测)', '2月(预测)'],
            axisLine: {
              lineStyle: {
                color: '#2a2a57'
              }
            },
            axisLabel: {
              color: '#7171a6'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '销售额 (元)',
            axisLine: {
              lineStyle: {
                color: '#2a2a57'
              }
            },
            axisLabel: {
              color: '#7171a6',
              formatter: '{value} 元'
            },
            splitLine: {
              lineStyle: {
                color: '#2a2a57',
                opacity: 0.3
              }
            }
          }
        ],
        series: [
          {
            name: '实际销售额',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#3a36db'
            },
            showSymbol: false,
            emphasis: {
              focus: 'series'
            },
            data: [142800, 148200, 144800, 152300, 165000, null, null]
          },
          {
            name: '预测销售额',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#00c9ff'
            },
            showSymbol: false,
            emphasis: {
              focus: 'series'
            },
            data: [null, null, null, null, 162000, 185600, 193200]
          },
          {
            name: '置信区间上限',
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            symbol: 'none',
            emphasis: {
              focus: 'series'
            },
            data: [null, null, null, null, 170000, 200720, 212520],
          },
          {
            name: '置信区间下限',
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            symbol: 'none',
            emphasis: {
              focus: 'series'
            },
            data: [null, null, null, null, 153000, 170480, 173880],
            areaStyle: {
              opacity: 0.3,
              color: '#00c9ff'
            }
          }
        ]
      };
      
      salesForecastChart.setOption(salesForecastOption);
      
      // 销售季节性分析图表
      const seasonalityChart = echarts.init(document.getElementById('seasonalityChart'));
      
      const seasonalityOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['2022年', '2023年', '2024年(预测)'],
          textStyle: {
            color: '#e0e0ff'
          },
          top: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
              lineStyle: {
                color: '#2a2a57'
              }
            },
            axisLabel: {
              color: '#7171a6'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '销售额 (元)',
            axisLine: {
              lineStyle: {
                color: '#2a2a57'
              }
            },
            axisLabel: {
              color: '#7171a6',
              formatter: '{value} 元'
            },
            splitLine: {
              lineStyle: {
                color: '#2a2a57',
                opacity: 0.3
              }
            }
          }
        ],
        series: [
          {
            name: '2022年',
            type: 'bar',
            barWidth: '15%',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#3a36db'
            },
            data: [105000, 98000, 112000, 125000, 128000, 136000, 132000, 127000, 133000, 130000, 135000, 143000]
          },
          {
            name: '2023年',
            type: 'bar',
            barWidth: '15%',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#00c9ff'
            },
            data: [125000, 118000, 128000, 135000, 142000, 158000, 152000, 142800, 148200, 144800, 152300, 165000]
          },
          {
            name: '2024年(预测)',
            type: 'bar',
            barWidth: '15%',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: '#00ffb3'
            },
            data: [185600, 193200, 198500, 205000, 212000, 225000, 218000, 210000, 217000, 215000, 220000, 230000]
          }
        ]
      };
      
      seasonalityChart.setOption(seasonalityOption);
      
      // 产品销售预测对比图表
      const productComparisonChart = echarts.init(document.getElementById('productComparisonChart'));
      
      const productComparisonOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['实际销售额', '预测销售额'],
          textStyle: {
            color: '#e0e0ff'
          },
          top: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          name: '销售额 (元)',
          axisLine: {
            lineStyle: {
              color: '#2a2a57'
            }
          },
          axisLabel: {
            color: '#7171a6',
            formatter: '{value} 元'
          },
          splitLine: {
            lineStyle: {
              color: '#2a2a57',
              opacity: 0.3
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['软件授权', '网站开发', '主机租赁', '定制服务', '技术支持'],
          axisLine: {
            lineStyle: {
              color: '#2a2a57'
            }
          },
          axisLabel: {
            color: '#7171a6'
          }
        },
        series: [
          {
            name: '实际销售额',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c} 元'
            },
            itemStyle: {
              color: '#3a36db'
            },
            data: [58000, 32000, 34500, 24500, 16000]
          },
          {
            name: '预测销售额',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c} 元'
            },
            itemStyle: {
              color: '#00c9ff'
            },
            data: [65000, 36500, 38700, 27500, 17900]
          }
        ]
      };
      
      productComparisonChart.setOption(productComparisonOption);
      
      // 预测误差分析图表
      const errorAnalysisChart = echarts.init(document.getElementById('errorAnalysisChart'));
      
      const errorAnalysisOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['预测误差率'],
          textStyle: {
            color: '#e0e0ff'
          },
          top: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
              lineStyle: {
                color: '#2a2a57'
              }
            },
            axisLabel: {
              color: '#7171a6'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '误差率 (%)',
            min: -10,
            max: 10,
            interval: 2,
            axisLine: {
              lineStyle: {
                color: '#2a2a57'
              }
            },
            axisLabel: {
              color: '#7171a6',
              formatter: '{value}%'
            },
            splitLine: {
              lineStyle: {
                color: '#2a2a57',
                opacity: 0.3
              }
            }
          }
        ],
        series: [
          {
            name: '预测误差率',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              opacity: 0.3,
              color: '#00ffb3'
            },
            emphasis: {
              focus: 'series'
            },
            data: [-3.2, -7.8, 1.2, -4.5, -1.8, 2.1],
            itemStyle: {
              color: '#00ffb3'
            },
            markLine: {
              silent: true,
              symbol: ['none', 'none'],
              label: {
                show: false
              },
              data: [
                {
                  yAxis: 0,
                  lineStyle: {
                    color: '#7171a6',
                    type: 'dashed'
                  }
                }
              ]
            }
          }
        ]
      };
      
      errorAnalysisChart.setOption(errorAnalysisOption);

      // 响应式调整
      window.addEventListener('resize', function() {
        salesForecastChart.resize();
        seasonalityChart.resize();
        productComparisonChart.resize();
        errorAnalysisChart.resize();
      });
    });
  </script>
</body>
</html>
